<template>
  <div class="middleTop">

    <div class="grids" style="min-width: 438px">
      <!-- <div class="grid">1</div>
      <div class="grid">2</div>
      <div class="grid">3</div>
      <div class="grid">4</div>
      <div class="grid">5</div>
      <div class="grid">6</div> -->
      <flipClock
        v-for="(item, i) in numberList"
        :key="i"
        :number="item.value"
        :nextNumber="item.value"
        :state="item.state"
      />
    </div>
  </div>
</template>
<script>
import flipClock from "./flipClock.vue";
import { appealOverCount } from "@/api/serve";
export default {
  name: "MiddleTop",
  props: {},
  components: {
    flipClock,
  },
  data() {
    return {
      numberList: [
        {
          value: "0",
          state: false,
        },
        {
          value: "1",
          state: false,
        },
        {
          value: "2",
          state: false,
        },
        {
          value: "3",
          state: false,
        },
        {
          value: "4",
          state: false,
        },
        {
          value: "5",
          state: false,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      appealOverCount().then((res) => {
        const d = res.data.result;
        if (d.resultCount) {
          const arr = String(d.resultCount)
            .split("")
            .map((item) => {
              return {
                state: true,
                value: item,
              };
            });
          if (arr.length < 6) {
            for (let i = arr.length; i < 6; i++) {
              arr.unshift({
                state: false,
                value: 0,
              });
            }
          }
          this.numberList = arr;
        }
      });
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.middleTop {
  margin: 22px 47px;
  background-image: url("../assets/middleTop.png");
  background-size: 100% 100%;
  height: 102px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  img {
    margin-top: 30px;
  }
  .grids {
    margin-left: 48px;
    display: flex;
    & > div {
      margin-right: 15px;
    }
    // .grid {
    //   width: 58px;
    //   height: 82px;
    //   margin-right: 15px;
    //   background-image: url("../assets/grid.png");
    //   background-size: 100% 100%;
    //   font-family: YouSheBiaoTiHei;
    //   font-size: 46px;
    //   color: #01fffe;
    //   line-height: 82px;
    // }
  }
}
</style>
